<template>
    <div id="login">
        <div class="login-form-container">
            <div class="login-form-title">账户登录</div>
            <div class="input-form">
                <div class="sub-title">账号</div>
                <el-input placeholder="请输入账号" v-model="username" clearable></el-input>
            </div>
            <div class="input-form">
                <div class="sub-title">密码</div>
                <el-input type="password" placeholder="请输入密码" v-model="password" clearable
                    @keyup.enter.native="login"></el-input>
            </div>
            <div class="button-container">
                <el-button type="primary" @click="login()">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            username: "",
            password: ""
        };
    },
    methods: {
        login() {
            var username = this.username;
            var password = this.password;
            if ("" == username) {
                this.$message({
                    message: "请输入账号",
                    type: "error"
                });
            } else if ("" == password) {
                this.$message({
                    message: "请输入密码",
                    type: "error"
                });
            } else {
                this.$http({
                    url: `/member/admin/account/login`,
                    method: 'post',
                    data: {
                        'username': this.username,
                        'password': this.$md5(this.password)
                    }
                }).then(response => {
                    if (response.code == "0" && response.authorization) {
                        this.$cookies.set("authorization", response.authorization, "30d");
                        this.$message({ message: "登录成功", type: "success" });
                        this.$router.push("/home");
                    } else {
                        this.$message({ message: response.message, type: "warning" });
                    }
                }).catch(error => {
                    this.$message({ message: error, type: "error" });
                });
            }
        }
    }
};
</script>

<style scoped lang="scss">
#login {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    background-image: url("../assets/imgs/background-img.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;

    .login-form-container {
        margin-right: 10%;
        margin-bottom: 6%;
        width: 400px;
        height: 320px;
        background-color: #fafafa;
        border-radius: 2%;
        font-weight: bold;

        .login-form-title {
            padding-top: 6%;
            font-size: larger;
        }

        .input-form {
            display: flex;
            align-items: center;
            padding-top: 10%;
            padding-right: 10%;
            padding-left: 5%;

            .sub-title {
                width: 20%;
            }

            .el-input {
                width: 80%;
            }
        }

        .button-container {
            padding-top: 10%;
            padding-left: 9%;
            padding-right: 10%;

            .el-button {
                width: 100%;
            }
        }
    }
}
</style>